<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/18/react.development.js"></script>
  <script src="./lib/18/react-dom.development.js"></script>
  <script src="./lib/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel"> /* 声明使用babel进行编译 jsx => js*/

  /* 
    react会自动遍历数组元素显示
    根据数据数组生成标签数组: arr.map()
    列表中vnode都需要有一个唯一的key, 尽量用id, 而不用index (原因后面再说)
  */
    // 数组数据
    const courses = [
      {id: 1, name: 'React'},
      {id: 3, name: 'Vue'},
      {id: 5, name: '小程序'}
    ]

    const arr = courses.map(c => c.name)  // ['React', 'Vue', '小程序']
    

    {
      /* 
      <li>{courses[0].name}</li>
      <li>{courses[1].name}</li>
      <li>{courses[2].name}</li>
      */
    }

    const vdom = (
      <div>
        <h2>前端框架课程列表</h2>
        <ul>
            {/* [
              <li key={courses[0].id}>{courses[0].name}</li>,
              <li key={courses[1].id}>{courses[1].name}</li>,
              <li key={courses[2].id}>{courses[2].name}</li>
            ] */}
            {
              courses.map(c => <li key={c.id}>{c.name}</li>)
            }
        </ul>
      </div>
    )

    ReactDOM.createRoot(document.getElementById('app')).render(vdom)

  </script>
</body>
</html>